<!-- 首页 -->
<template>
  <div class="home">
    <!-- 日记 -->
    <div class="outer top" @click="handleDate">
      <div class="inner">日 记</div>
    </div>
    <!-- 记账 -->
    <div class="outer mid" @click="goToModule('/money')">
      <div class="inner">记 账</div>
    </div>
    <!-- 记账 -->
    <div class="outer bottom" @click="handleQuit">
      <div class="inner">退 出</div>
    </div>

    <!-- 注销 -->
    <div class="outer bottoms" @click="handWithdraw()">
      <div class="inner">注 销</div>
    </div>
    <!-- 日历 -->
    <nut-calendar
      :is-visible.sync="showCalendar"
      default-value="2021-04-16"
      @choose="setChooseValue"
      :start-date="`2018-10-11`"
      :end-date="`2025-11-11`"
    />
  </div>
</template>

<script>
import { API_Withdraw } from "@/api/system" 

export default {
  data() {
    return {
      showCalendar: false,
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    // 打开日历
    handleDate() {
      this.showCalendar = true;
    },
    // 选择日期
    setChooseValue(arr) {
      this.$router.push({
        path: "/diary",
        query: {
          date: arr[3],
        },
      });
    },
    // 跳转到模块
    goToModule(moduleUrl) {
      this.$router.push(moduleUrl);
    },
    // 退出登录
    handleQuit() {
      const _this = this;
      this.$dialog({
        title: "注意",
        content: "确定要退出登录嘛？",
        closeBtn: true,
        onOkBtn(event) {
          //确定按钮点击事件
          localStorage.clear();
          _this.$router.push("/login");
          _this.$toast.success("已退出登录");
          this.close();
        },
      });
    },
    // 用户注销
    handWithdraw() {
      let _this = this;
      this.$dialog({
        title: "注意",
        content: "确定要注销吗？",
        closeBtn: true,
        onOkBtn(event) {
          //确定按钮点击事件
          API_Withdraw()
            .then((res) => {
              if (res.data.code === 0) {
                localStorage.clear();
                _this.$router.push("/login");
                _this.$toast.success("已退出登录");
                this.close();
              }
            })
            .catch((err) => {});
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/helper.scss";
.home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: url("../assets/home-bg.jpg") no-repeat center;
  background-size: 100% 100%;
  .outer {
    width: 100px;
    height: 100px;
    background: #ece145;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    &.top {
      top: 15%;
    }
    &.mid {
      top: 35%;
    }
    &.bottom {
      bottom: 13%;
    }
    &.bottoms {
      top: 55%;
      right: 10%;
    }
    .inner {
      width: 90px;
      height: 90px;
      line-height: 90px;
      margin: 5px;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      background: $color-highlight;
    }
  }
}
</style>